<template>
  <div class="hello" id="myWallet">
    <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="我的钱包"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <!-- 钱包头像框 -->
    <div class="topBox">
        <div class="headPortrait">
            <img src="../assets/images/我的钱包/headPic.png" alt="">
        </div>
        <div class="writingBox">
            <p class="writingOne">
                <span class="leftWriting">账户余额</span>
                <span class="rightWriting">￥0.00</span>
            </p>
            <p class="writingTwo">
                <span class="leftWriting">累计积分收益</span>
                <span class="rightWriting">1000</span>
            </p>
        </div>
    </div>
    <!-- 余额提现 -->
    <div class="theBalanceOfWithdrawal">
        余额提现
        <img src="../assets/images/我的钱包/icon.png" alt="">
    </div>
    <!-- 九宫格 -->
    <van-grid square :column-num="3">
        <van-grid-item 
        v-for="(item,index) in gridtextlist" 
        :key="index"
        :text="item.text"
        :icon="item.photo"
        :to="item.url"
        />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'MyWallet',
  data () {
    return {
        gridtextlist:[
            {
                text:"我的粉比",
                icon:"n",
                photo:require('../assets/images/我的钱包/icon_1.png'),
                url:'/MyChalk'
            },
            {
                text: "粉笔订单",
                icon:"w",
                photo:require('../assets/images/我的钱包/icon_2.png'),
                url:'/ChalkOrder'
            },
            {
                text:"我的代言费",
                icon:"j",
                photo:require('../assets/images/我的钱包/icon_3.png'),
                url:'/Endorsement'

            },
            {
                text:"我的私享卡",
                icon:"g",
                photo:require('../assets/images/我的钱包/icon_4.png'),
                url:'/MyWalletSon'

            },
            {
                text:"我的积分",
                icon:"h",
                photo:require('../assets/images/我的钱包/icon_5.png'),
                url:'/Integral'

            },
            {
                text:"我的优惠劵",
                icon:"template",
                photo:require('../assets/images/我的钱包/icon_6.png'),
                url:'/Coupons'

            },
            {
                text:"账单查询",
                icon:"scoped",
                photo:require('../assets/images/我的钱包/icon_8.png'),
                url:'/Bill'

            },
            {
                text:"粉比权益", 
                icon:"sh",
                photo:require('../assets/images/我的钱包/icon_7.png')
            },  
            {
                text:"比朗学院",
                icon:"sh",
                photo:require('../assets/images/我的钱包/icon_9.png')
            },   
        ]
    }
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
}
</script>

<style scoped lang='less'>
.hello{
    background: #f3f4f6;
    // height: 100%;
}
// 导航栏
.navBox{
  width: 100%;
  height: 90px;
}
.van-nav-bar__content{
  height: 90px;
  background:rgba(48, 48, 50, );
  line-height: 90px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon{
    color: #fff;
  }
}
// 钱包头像框
.topBox{
    width: 100%;
    height: 225px;
    .headPortrait{
        width: 30%;
        height: 100%;
        padding: 40px 0 40px 100px;
        box-sizing: border-box;
        float: left;
        img{
            width: 140px;
            height: 140px;
            border-radius: 50%;
        }
    }
    .writingBox{
        width: 70%;
        height: 100%;
        float: right;
        .writingOne{
            font-size: 24px;
            width: 78%;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            margin-top: 50px;
            .leftWriting{
            float: left;
            color: #787878;
            }
            .rightWriting{
            float: right;
            color: #ff4242;
            }
        }
        .writingTwo{
            font-size: 24px;
            width: 78%;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            .leftWriting{
            float: left;
            color: #787878;
            }
            .rightWriting{
            float: right;
            color: #333;
            }
        }
    }
}
// 余额提现
.theBalanceOfWithdrawal{
    width: 100%;
    height: 100px;
    background: #e1e1e1;
    font-size: 28px;
    color: #234497;
    text-align: center;
    line-height: 100px;
    position: relative;
    img{
        width: 28px;
        height: 25px;
        position: absolute;
        top: 37px;
        right: 20px;
    }
}
</style>
